// components/task/task.js
const app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    btnText: {
      type: String,
      default: '执行'
    },
    info: {
      type: Object,
      default: {}
    },
    slidable: {
      type: Boolean,
      default: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    left: 0, // 容器X坐标
    clientX: 0, // 记录滑动时坐标变化
    operateWidth: 140, // 右侧操作区长度，以px为单位
    slideLength: 0 // 单次滑动长度
  },

  observers: {
    'slidable': function (value) {
      // 任务被移动时，重置滑动位置
      !value ? this.setData({left: 0}) : ''; 
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleMoveStart (e) {
      const { clientX: x } = e.touches[0];
      this.setData({
        clientX: x,
        slideLength: 0
      });
    },
    
    
    /**
     * 计算滑动，设置相应的动态效果
     * 注意：
     * 1. 如果左右到头了则不能再滑动
     * 2. movable-view移动时不能滑动
     * 
     * @param {*} e 
     * @returns 
     */
    handleMove (e) {
      const { clientX: x } = e.touches[0];
      const clientX = this.data.clientX;
      const distance = x - clientX;
      const left = this.data.left + distance;
      const slideLength = this.data.slideLength + distance;

      // 禁止滑动
      if (left > 0 || left < -this.data.operateWidth || !this.data.slidable) {
        return;
      }

      this.setData({
        left,
        clientX: x,
        slideLength
      });
    },

    /**
     * 滑动松手时做以下处理:
     * 
     * 移动距离大于 2px 时，才会进行以下流程
     * 
     * 以后面操作区宽度operateWidth一半作为分界点
     * 需要注意滑动方向
     * 1. 松手时移动距离如果>=operateWidth/2则自动弹出全部隐藏区域
     * 2. 松手时移动距离如果<operateWidth/2则自动缩回全部隐藏区域
     * 
     * @param {*} e 
     */
    handleMovend (e) {
      const slideLength = this.data.slideLength;
      const operateWidth = this.data.operateWidth;
      const length = operateWidth / 3;

      if (Math.abs(slideLength) < 2) {
        return;
      }

      // 向左滑时
      if (slideLength <= 0) {
        Math.abs(slideLength) >= length 
        ?
        this.setData({
          left: -operateWidth
        })
        :
        this.setData({
          left: 0
        })
      } else {
        slideLength >= length 
        ?
        this.setData({
          left: 0
        })
        :
        this.setData({
          left: -operateWidth
        })
      }
    },

    actionTask () {
      wx.vibrateShort({
        type: 'heavy'
      });
      this.setData({
        left: 0
      });
      this.triggerEvent('actionTask', this.data);
    },

    deleteTask () {
      wx.vibrateShort({
        type: 'heavy'
      });
      this.setData({
        left: 0
      });
      this.triggerEvent('deleteTask', this.data.info);
    }
  }
})
